<template>
  <a-card class="general-card" id="print-template">
    <a-form ref="formRef" :model="form" auto-label-width>
<!--      工序信息-->
      <div class="title">工序</div>
      <a-grid :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }" :colGap="5" :rowGap="0" class="grid-demo-grid">
        <a-grid-item class="demo-item">
          <a-form-item field="TE006" label="工单单别">
            {{form.TE006}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE007" label="工单单号">
            {{form.TE007}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE017" label="产品品号">
            {{form.TE017}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE018" label="产品品名">
            {{form.TE018}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE019" label="产品规格">
            {{form.TE019}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE020" label="单位">
            {{form.TE020}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item label="预计产量">
            {{ta015}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE008" label="工序">
            {{form.TE008}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE009" label="工艺">
            {{form.TE009}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item label="工艺名称">
            {{name}}
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE011" label="数量">
            <a-input v-model="form.TE011" placeholder="请输入"/>
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE005" label="设备编号">
            <a-input v-model="form.TE005" placeholder="请输入"/>
          </a-form-item>
        </a-grid-item>
        <a-grid-item class="demo-item">
          <a-form-item field="TE022" label="设备名称">
            <a-input v-model="form.TE022" placeholder="请输入"/>
          </a-form-item>
        </a-grid-item>
<!--        <a-grid-item class="demo-item">-->
<!--          <a-form-item field="TE004" label="员工编号">-->
<!--            <a-select v-model="form.TE004" placeholder="输入员工编号或姓名搜索" allow-search @change="changeStaff">-->
<!--              <a-option v-for="(item2,index2) in staffList" :key="index2" :label="item2.label"></a-option>-->
<!--            </a-select>-->
<!--          </a-form-item>-->
<!--        </a-grid-item>-->
<!--        <a-grid-item class="demo-item">-->
<!--          <a-form-item field="UDF07" label="员工姓名">-->
<!--            <span>{{form.UDF07}}</span>-->
<!--          </a-form-item>-->
<!--        </a-grid-item>-->


        <a-grid-item class="demo-item">
          <a-form-item field="TE015" label="备注">
            <a-input v-model="form.TE015" placeholder="请输入"/>
          </a-form-item>
        </a-grid-item>
      </a-grid>
      <!--      子工序信息-->
      <div class="title">子工序</div>
      <a-row v-for="(item,index) in form.sonList" :key="index" :gutter="20">
        <a-col flex="auto">
          <a-form-item field="UDF09" label="工序编号">
            {{item.UDF09}}
          </a-form-item>
        </a-col>
        <a-col flex="auto">
          <a-form-item field="UDF10" label="工艺编号">
            {{item.UDF10}}
          </a-form-item>
        </a-col>
        <a-col flex="auto">
          <a-form-item field="zgymc" label="工艺名称">
            {{item.zgymc}}
          </a-form-item>
        </a-col>
        <a-col flex="auto">
          <a-form-item field="code" label="员工编号">
            <a-select v-model="item.code" placeholder="输入员工编号或姓名搜索" allow-search @focus="getIndex(index)" @change="changeStaff">
              <a-option v-for="(item2,index2) in staffList" :key="index2" :label="item2.label"></a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col flex="auto">
          <a-form-item field="name" label="员工姓名">
            <span>{{item.name}}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="bottom">
      <a-button type="primary" @click="dispatch">派工</a-button>
<!--      <a-button @click="stamp">打印</a-button>-->
    </div>

    <div ref="epDraggableItem" class="ep-draggable-item item" tid="defaultModule.text">
      <!-- 这里填写你想在页面上显示的内容   -->
    </div>
  </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './dispatchingWork.ts';

export default {
  setup() {
    const {
      base,
      dispatch,
      changeStaff,
      stamp,
      getIndex,
    } = importConfig();

    return {
      ...toRefs(base),
      dispatch,
      changeStaff,
      stamp,
      getIndex,
    };
  },
};
</script>

<style lang="less" scoped>
.bottom{
  margin-top: 35px;

  :deep(.arco-btn-primary){
    width: 100%;
  }
}

.title{
  width: 100%;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid #ccc;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
</style>
